<template>
    <div class="vehicle-detail">
        <div class="vehicle-detail-branch">
            <router-link to="/vehicle">车辆列表</router-link>
            <span>&gt;</span>
            <span>车辆详情</span>
        </div>

        <div class="vehicle-detail-main">
            <div class="detail-main-top">
                <el-carousel 
                    ref="imgCarousel"
                    :autoplay="false"
                    :initial-index="activeIndex"
                    @change="changeImage"
                    :arrow="imageList.length > 1 ? 'always' : 'never'" 
                    indicator-position="none">
                    <el-carousel-item v-for="(item, inx) in imageList" :key="inx">
                        <img :src="BASE_URL + item">
                    </el-carousel-item>
                    <span class="carouse-image-number">{{getActiveImage}}/{{imageList.length}}</span>
                </el-carousel>
                <div>
                    <div>
                        <span class="detail-top-name">{{infoDetail.brand}}</span>
                        <div class="detail-top-number">
                            <span>{{infoDetail.number.substr(0, 2)}}</span> · <span>{{infoDetail.number.substr(2)}}</span>
                        </div>
                        <div class="detail-top-type">
                            <span>{{infoDetail.property === 1 ? '职务配车' : '公务用车'}}</span>
                            <span>{{infoDetail.type_name ? infoDetail.type_name : '-'}}</span>
                        </div>
                        <div class="detail-top-content">
                            <div>
                                <span>{{infoDetail.color ? infoDetail.color : '-'}}</span>
                                <span>车身颜色</span>
                            </div>
                            <div>
                                <span>{{infoDetail.output ? infoDetail.output : '-'}}</span>
                                <span>排量</span>
                            </div>
                            <div>
                                <span>{{infoDetail.seat ? infoDetail.seat : '-'}}</span>
                                <span>乘坐人数</span>
                            </div>
                            <div>
                                <span>{{infoDetail.gearbox ? gearboxList[infoDetail.gearbox - 1] : '-'}}</span>
                                <span>变速箱</span>
                            </div>
                        </div>
                        <div class="detail-top-operate" :class="getClass">
                            <img :src="getImage">
                            <span>{{stateName[infoDetail.status -1]}}</span>
                        </div>
                        <div 
                            v-if="infoDetail.status !== 2" 
                            class="detail-top-time" 
                            :style="{marginTop: infoDetail.status === 1 ? '14px' : '58px'}">
                            <template v-if="infoDetail.status_info">
                                <span>{{timeTitle[infoDetail.status -1]}}：</span>
                                <span>{{infoDetail.status_info.create_time}}{{infoDetail.status !== 1 ? '' : ` - ${infoDetail.status_info.return_day}`}}</span>
                            </template>
                        </div>
                    </div>
                    <!-- 闲置 -->
                    <span v-if="infoDetail.status === 2" class="booking-car" @click="bookingCar">预约用车</span>
                    <!-- 使用中 -->
                    <template v-if="infoDetail.status === 1">
                        <span 
                            class="set-reminder" 
                            :style="{cursor: infoDetail.status_info.is_alert ? 'inherit' : 'pointer'}"
                            @click="setReminder">{{infoDetail.status_info.is_alert ? '已设置提醒' : '设置提醒'}}</span>
                    </template>
                </div>
            </div>

            <div class="detail-main-bottom">
                <span class="detail-bottom-left" @click="preImage" v-if="imageList.length > 1"><i class="el-icon-arrow-left"></i></span>
                <span class="detail-bottom-right" @click="nextImage" v-if="imageList.length > 1"><i class="el-icon-arrow-right"></i></span>
                <div class="detail-main-content">
                    <div 
                        v-for="(item, inx) in imageList" 
                        :key="inx" 
                        :class="activeIndex === inx ? 'bottom-content-active' : ''"
                        @click="changeImage(inx)">
                        <img :src="BASE_URL + item">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import idle from './../../../assets/images/vehicle/idle.png';
import useing from './../../../assets/images/vehicle/useing.png';
import damage from './../../../assets/images/vehicle/damage.png';
import disable from './../../../assets/images/vehicle/disable.png';
import scrapped from './../../../assets/images/vehicle/scrapped.png';

export default {
    data() {
        return {
            loading: false,
            activeIndex: 0,
            imageList: [],
            gearboxList: ['手动', '自动', '手自一体'], // 变速箱
            stateImg: [useing, idle, disable, damage, scrapped], // 状态图片地址
            stateName: ['使用中', '闲置', '停用', '损坏', '报废'], // 状态名称
            timeTitle: ['预约用车时间', '', '停用时间', '损坏时间', '时间'], // 状态时间名称
            stateClass: ['useing', 'idle', 'disable', 'damage', 'scrapped'], // 状态样式
            infoDetail: {
                number: '',
                status_info: {}
            }
        }
    },
    created() {
        this.getDetail();
    },
    computed: {
        /**
         * 图片地址
         */
        getImage() {
            return this.stateImg[this.infoDetail.status - 1];
        },
        /**
         * 获取样式
         */
        getClass() {
            return 'detail-top-' + this.stateClass[this.infoDetail.status -1]
        },
        /**
         * 获取当前图片
         */
        getActiveImage() {
            return this.imageList.length > 0 ? +this.activeIndex + 1 : 0;
        },
    },
    methods: {
        /**
         * 获取详情信息
         */
        getDetail() {
            this.loading = true;

            const success = (res => {
                this.loading = false;
                this.infoDetail = res.data;
                this.imageList = this.infoDetail.image;
            })

            this.$ajax({
                url: 'api/car/single',
                method: 'get',
                params: {
                    id: this.$route.query.id,
                    with_image: 1,
                    with_sinfo: 1
                },
                func: {success: success}
            });
        },
        /**
         * 切换幻灯片
         * @param {Number} inx1 目前激活的幻灯片的索引
         * @param {Number} inx2 原幻灯片的索引
         */
        changeImage(inx1, inx2) {
            if (is_empty(inx2)) {
                this.$refs.imgCarousel.setActiveItem(inx1);
            } else {
                this.activeIndex = inx1;
            }

            this.moveScroll();
        },
        /**
         * 切换图片，上一张图片
         */
        preImage() {
            if (this.activeIndex === 0) {
                this.$refs.imgCarousel.setActiveItem(this.imageList.length -1);
            } else {
                this.$refs.imgCarousel.setActiveItem(this.activeIndex - 1);
            }

            this.moveScroll();
        },
        /**
         * 切换图片，下一张图片
         */
        nextImage() {
            if (this.activeIndex === this.imageList.length -1) {
                this.$refs.imgCarousel.setActiveItem(0);
            } else {
                this.$refs.imgCarousel.setActiveItem(this.activeIndex + 1);
            }

            this.moveScroll();
        },
        /**
         * 移动图片列表的滚动条
         * 图片数组长度小于9，不需要移动
         * 当前图片索引小于3或图片数组长度减去当前图片索引大于3，不需要移动
         */
        moveScroll() {
            let dom =  document.querySelector('.detail-main-content');

            if (this.imageList.length > 8) {
                if (this.activeIndex > 3 && this.imageList.length - this.activeIndex > 3) {
                    dom.scrollLeft = 142 * (this.activeIndex - 3);
                } else {
                    if (this.activeIndex <= 3) {
                        dom.scrollLeft = 0;
                    } else {
                        dom.scrollLeft = dom.scrollWidth;
                    }
                }
            }
        },
        /**
         * 预约用车 -- 跳到审批--用车申请页面
         */
        bookingCar() {
            this.$router.push('/examine/detail?id=9');
        },
        /**
         * 设置提醒
         */
        setReminder() {
            if (this.infoDetail.status_info.is_alert === 0) {
                const params = {
                    id: this.$route.query.id
                }
                const success = (res => {
                    this.infoDetail.status_info.is_alert = 1;
                    this.$message.success(res.msg);
                })

                this.$ajax.post('api/car/bookmsg', params, {func: {success: success}})
            }
        }
    },
}
</script>

<style lang="scss">
.vehicle-detail {
    margin: 20px auto 50px;
    max-width: 1200px;

    .vehicle-detail-branch {
        a {
            font-size: 14px;
            color: #333;
        }

        span:nth-child(2) {
            padding: 0 6px;
        }

        span {
            font-size: 14px;
            color: #666;
        }
    }

    .vehicle-detail-main {
        margin-top: 22px;
        padding: 40px;
        height: 730px;
        background: #FFFFFF;
        border-radius: 3px;
        box-sizing: border-box;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);

        .detail-main-top {
            display: flex;
            padding-bottom: 38px;
            height: 420px;
            border-bottom: 1px dotted #EFEFEF;

            .el-carousel {
                margin-right: 44px;
                width: 420px;
                height: 420px;
                box-sizing: border-box;

                .el-carousel__container {
                    height: 100%;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                .el-carousel__arrow {
                    width: 40px;
                    height: 40px;

                    i {
                        font-size: 23px;
                    }
                }

                .carouse-image-number {
                    position: absolute;
                    right: 16px;
                    bottom: 12px;
                    font-size: 20px;
                    color: #FFFFFF;
                    z-index: 99;
                    text-shadow: 0 2px 4px rgba(0,0,0,0.50);
                }
            }

            >div:last-child {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .detail-top-name {
                font-size: 30px;
                font-weight: bold;
                line-height: normal;
                color: #000;
            }

            .detail-top-number {
                margin: 14px 0 20px;
                width: 182px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                font-size: 26px;
                color: #FFFFFF;
                background: #316FAB;
                border-radius: 3px;
                border: 1px solid #298CE0;
                box-shadow: 0px 0px 1px 3px #E7FBFF inset;
            }

            .detail-top-type {
                span {
                    display: inline-block;
                    margin-right: 10px;
                    padding: 0 10px;
                    height: 30px;
                    line-height: 30px;
                    min-width: 78px;
                    vertical-align: middle;
                    font-size: 14px;
                    text-align: center;
                    color: #666666;
                    border: 1px solid #DDDDDD;
                    border-radius: 15px;
                    box-sizing: border-box;
                }
            }

            .detail-top-content {
                display: flex;
                margin: 20px 0;
                width: 656px;
                height: 90px;
                background: #F0F5F7;
                box-sizing: border-box;

                div {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: space-evenly;
                    width: 164px;
                    box-sizing: border-box;

                    span:first-child {
                        font-size: 20px;
                        color: #000;
                    }

                    span:last-child {
                        font-size: 13px;
                        color: #666;
                    }
                }
            }

            .detail-top-operate {
                width: 120px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                border-radius: 30.5px;

                img {
                    margin-right: 14px;
                    vertical-align: middle;
                }

                span {
                    font-size: 14px;
                }
            }

            /** 闲置 */
            .detail-top-idle {
                background: #D4FFD1;

                span {
                    color: #427A58;
                }
            }

            /** 使用中 */
            .detail-top-useing {
                background: #DAF4FF;

                span {
                    color: #4199AE;
                }
            }

            /** 损坏 */
            .detail-top-damage {
                background: #FFD1D1;

                span {
                    color: #B53E3E;
                }
            }

            /** 停用 */
            .detail-top-disable {
                background: #EDEDED;

                span {
                    color: #666;
                }
            }

            /** 报废 */
            .detail-top-scrapped {
                background: #C0C0C0;

                span {
                    color: #666;
                }
            }

            .detail-top-time {
                margin-top: 58px;
                font-size: 14px;

                span:first-child {
                    margin-right: 20px;
                    color: #666;
                }

                span:last-child {
                    color: #000;
                }
            }

            .booking-car {
                display: block;
                width: 180px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 16px;
                color: #FFFFFF;
                background: #348EFC;
                border-radius: 4px;
                cursor: pointer;
            }

            .set-reminder {
                width: 180px;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                color: #348EFC;
                text-align: center;
                border: 1px solid #348EFC;
                border-radius: 4px;
                cursor: pointer;
            }
        }

        .detail-main-bottom {
            position: relative;

            .detail-main-content {
                position: relative;
                margin-top: 48px;
                text-align: center;
                white-space: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                box-sizing: border-box;

                >div {
                    display: inline-block;
                    margin-right: 6px;
                    width: 130px;
                    height: 130px;
                    line-height: 130px;
                    border: 3px solid transparent;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }

                >div:last-child {
                    margin-right: 0;
                }
            }

            >span {
                position: absolute;
                top: 68px;
                display: flex;
                width: 50px;
                height: 136px;
                align-items: center;
                justify-content: center;
                background: rgba(31,45,61,.11);
                transform: translateY(-50%);
                cursor: pointer;
                z-index: 99;

                i {
                    font-size: 28px;
                    color: #fff;
                }
            }

            >span:hover {
                background: rgba(31,45,61,.23);
            }

            .bottom-content-active {
                border: 3px solid #348EFC !important;
            }

            .detail-bottom-right {
                right: 0;
            }
        }
    }
}
</style>